<template>
  <div>
    <div id='canvas-container' v-loading="loading">
      <drawer :imageUrl="imageUrl" :points="points" :pushPoint='false' @event="event"/>
    </div>
    <div id='form-container'>
      <div v-if='points.length > 0' style="position:relative">
        <div class='form-title'>当前点位：{{currentLabel}}</div>
        <div class='form-item' :key="index" v-for="(item, index) in currentPoint">
          <div class='form-item-title'>{{item.checkName}}</div>
          <div hidden>
            <el-input size="small">{{item.projectCheckTypeId}}</el-input>
          </div>
          <div style="margin-top:10px">
            <span>评判标准:</span>
            <el-input-number size="small" class='input-number' v-model="item.errorLowerLimit"></el-input-number>
            <span>至</span>
            <el-input-number size="small" class='input-number' v-model="item.errorUpperLimit"></el-input-number>
          </div>
          <div style="margin-top:10px">
            <span>设计值: <el-input v-model="item.standardNum" size="small" placeholder="请输入内容" style="width:245px;"></el-input></span>
          </div>
        </div>
        <el-button type="primary" class='button-full' icon='el-icon-document-checked' @click="save">保存</el-button>
      </div>
      <div v-else class='no-point'>
        暂无点位信息,请先标记一个测点
      </div>
    </div>
  </div>
</template>
<script>
  import { addMeasurePoint,getPaperPointList } from '@/api/measure'
  import Drawer from './Drawer'
  import {convertPdfToImgUrl} from '@/api/pdf-convert'
  export default {
    components: { Drawer },
    data() {
      return {
        loading:false,
        checkSourceData: [], // 检查项源数据
        points: [],
        projectId: null,
        measurePaperId: null,
        imageUrl: '', //http://jasobim.com/files/papers/257/05a870402427cc9552a143e1bffa11fc.png
        currentPoint: [], // 当前展示的点
        currentLabel: ''
      }
    },
    methods: {
      initData(measurePaperId){
        //获取当前图纸下的测点信息
        getPaperPointList({"projectId":this.$route.query.projectId,"measurePaperId":measurePaperId}).then(res =>{
          let data = res.data.measurePointInfo;
          this.points = (data instanceof Array)?data:[];
          if(this.points.length > 0){ 
            this.setCurrentPoint(0); // 设置默认编辑第一个
          }
        })
      },
      setCurrentPoint(index){
        this.currentPoint = this.points[index].pointCheckList;
        this.currentLabel = this.points[index].label;
        document.getElementById('form-container').scrollTop = 0;
      },
      buildPoint(point){ // 生成一个新的标记点
        let pointCheckList = this.checkSourceData.map((checkItem)=>{
          return Object.assign({}, checkItem, { // 将检查项与数据默认值克隆到新数据
            errorUpperLimit: 5,
            errorLowerLimit: -5,
            standardNum: 0
          });
        });
        return {
          x: point.x,
          y: point.y,
          label: point.label,
          projectId: this.projectId,
          measurePaperId: this.measurePaperId,
          pointCheckList
        }
      },
      event(params) {
        console.log(params.point.x,params.point.y)
        if(params.instruction === 'insert-point'){
          this.points.push(this.buildPoint(params.point));
          this.setCurrentPoint(this.points.length-1); 
        }else if(params.instruction === 'move-point'){
          for(let i in this.points){
            if(this.points[i].label === params.point.label){
              this.points[i].x = params.point.x;
              this.points[i].y = params.point.y;
              this.setCurrentPoint(i);
              break;
            }
          }
        }
      },
      save() {
        console.log('this.points:',this.points);
         this.$confirm('您确定提交测点吗？').then(_ => {
            this.loading = true;
            addMeasurePoint(this.points).then(res => {
                this.loading = false;
                this.$confirm('录入成功，跳转列表').then(_ =>{
                    this.$router.push({
                    path: '/project/measure/drawers',
                    query: { }
                  })
              })
            })
        }).catch(_ => {
        })
       
      },
      initSize(){
        let container = window.document.getElementById('canvas-container');
        let form = window.document.getElementById('form-container');
        let setWidth = ()=>{
          container.style.width = `${(window.innerWidth - form.offsetWidth)}px`;
        }
        window.addEventListener('resize',setWidth,false);
        setWidth();
      }
    },
    created() {
      this.checkSourceData = JSON.parse(sessionStorage.getItem('items'))
      this.projectId = this.$route.query.projectId
      this.measurePaperId = this.$route.query.measurePaperId
      let paperUrl = this.$route.query.paperUrl
      //let paperUrl = 'http://localhost:8088/pdf.pdf' // this.$route.query.paperUrl; // 
      debugger
      if(paperUrl.substring(paperUrl.length-4) === '.pdf'){
        // paperUrl 这地方加一下 "http://jasobim.com:8089" 前缀
        paperUrl = "http://jasobim.com:8085" + paperUrl;
        convertPdfToImgUrl(paperUrl,(imgUrl)=>{
          debugger;
          //this.imageUrl = "http://jasobim.com:8085"+imgUrl;
          this.imageUrl="http://jasobim.com:8085/uploadFiles/projectfiles/6ffb26ae58d9e0cc1c089f5a276d35f3.pdf";
          this.initData(this.$route.query.measurePaperId);
        })
      }else{
        this.imageUrl = "http://jasobim.com:8085"+paperUrl;
        this.initData(this.$route.query.measurePaperId);
      }
    },
    mounted(){
      this.initSize();
    }
  }
</script>
<style>
#canvas-container{
  position: fixed;
  height: 100%;
  left: 0;
  width: 800px;
  overflow: auto;
}
#form-container{
  position: fixed;
  height: 100%;
  width: 380px;
  right: 0;
  box-shadow: 0 5px 15px 5px #cecece;
  box-sizing: border-box;
  background-color: #efefef;
  padding: 15px;
  overflow: auto;
}
.form-title{
  margin-bottom: 15px;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  text-align: center;
}
.form-item{
  box-sizing: border-box;
  background-color: #fff;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 0px 8px 1px #cecece;
  border-radius: 5px;
}
.form-item-title{
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}
.button-full{
  width: 100%;
}
.input-number{
  width: 102px;
}
.no-point{
  text-align: center;
  margin-top: 100px;
  color: #aaa;
}
</style>
